<template>
  <div style=" font-size: 12px; line-height: 60px; display: flex;" router>
    <div style="flex:1; font-size: 18px;">
      <span :class="collapseBtnClass" style="cursor: pointer;" @click="collapse"></span>
      <el-breadcrumb separator="/" style="display: inline-block; margin-left: 10px;">
        <el-breadcrumb-item><a href="/Manage/first" style="cursor: pointer;"><b><i class="el-icon-s-home"></i></b></a></el-breadcrumb-item>
        <!-- <el-breadcrumb-item><a href="/Manage/user">用户管理</a></el-breadcrumb-item> -->
      </el-breadcrumb>
    </div>
    <el-dropdown style="width: 70px; cursor: pointer;margin-right: 30px;">
       <span class="fit"><b>{{ user.username }}</b><img :src="user.avatar" class="avat"></span> 
      <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center;">
        <el-dropdown-item>
          <router-link to="/Manage/person" style="text-decoration: none; color: black;">个人信息</router-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <router-link to="/Manage/pwdchange" style="text-decoration: none; color: black;">修改密码</router-link>
        </el-dropdown-item>
        <el-dropdown-item @click.native="quitAccount">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  name: "Header",
  props: {
    collapseBtnClass: String,
    collapse: '',
    navg: '1',
    path: '',
  },
  data() {
    return {
      user:''
    }
  },
  created() {
    this.load();
    
  },
  methods: {
    load() {
      this.user=JSON.parse(sessionStorage.getItem("loginUser"));
      
      
    },
    quitAccount(){
      
		  this.user=null;
      this.load;
		  this.$router.push("/");
	
    },
    
    
  }
}
</script>
<style>
.fit {
  display: flex;
  white-space: nowrap;
  /*强制span不换行*/
  height: 60px;
}
.avat {
  border-radius:50%;
  display: block;
  height: 45px;
  width: 45px;
  margin: 10px;
}
</style>